import React from 'react';
import {connect} from "dva";
import {Table, Row, Col, Form, Input, Icon, InputNumber, Select, Button, message} from 'antd';
import SingleDragger from "../commons/SingleDragger";
import Constants from "../../utils/Constants";

const R = require('ramda');
const {TextArea} = Input;
const FormItem = Form.Item;


export default Form.create({wrappedComponentRef: true})(class AccountInfos extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                disabled: true,
                url: ""
            }
        }


        handleResetFields = () => {
            this.props.form.resetFields();
            this.props.dispatch({ type: "customerManage/setRecAcc", payload: {recAcc: {}} });
            this.props.dispatch({ type: "logisticsSupplier/refreshState", payload: {recAccData: {}} });
        }


        setDeclarationList = (value) => {
            if (value) {
                if(this.props.stObj === "0"){
                    this.props.dispatch({
                        type: 'customerManage/getRecAccById',
                        payload: {
                            id: value
                        }
                    });
                }else {
                    this.props.dispatch({
                        type: 'logisticsSupplier/getSupplierPayeeById',
                        payload: {
                            id: value
                        }
                    });
                }
            }
        }

        handleConfirm = () => {
            let flag = false;

            this.props.form.validateFields((errors, values) => {
                if (errors) return;
                flag = true;

                let url = this.refs.url.getUrl();
                if (!R.isNil(url) && !R.isEmpty(url)) {
                    values.filename = url.substring(url.lastIndexOf('/') + 1, url.length);
                }
                values.url = url;


                this.props.dispatch({
                    type: "settlement/createStatement",
                    payload: {
                        ...values,
                        stObj: this.props.stObj,
                        stObjId: this.props.suppilerId,
                        statementDetailForm: this.props.statementFee,
                        onSuccess: ()=>{
                            this.props.dispatch({ type: 'capital/getStatementsList', payload: { status: "2" } });
                            //this.props.dispatch({type: 'settlement/queryStatements', payload: { status: 2, page: Constants.DEFAULT_PAGE }});
                        }
                    }
                })
            });

            return flag;
        }



        render() {
            const {getFieldDecorator} = this.props.form;
            const formItemLayout = {labelCol: {xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;


            let recAccsList = [];
            recAccsList = this.props.stObj === "0" ? this.props.customerManage.recAccsList : this.props.logisticsSupplier.recAccList;
            let recData = {};
            recData = this.props.stObj === "0" ? this.props.customerManage.recAcc : this.props.logisticsSupplier.recAccData;

            return (

                <Form>
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="本次结算金额" hasFeedback>
                                {getFieldDecorator('transferamount', {
                                    initialValue: this.props.transferamount
                                })(
                                    <InputNumber style={{width: '100%'}} maxLength="18" disabled={true}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="收款人" hasFeedback>
                                {getFieldDecorator('accname', {
                                    rules: [{
                                        required: true, message: '请选择收款人'
                                    }],
                                    initialValue: ''
                                })(
                                    <Select style={{width: '100%'}} showSearch
                                            placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            onChange={this.setDeclarationList.bind(this)}>
                                        {
                                            recAccsList.map(item => {
                                            return (<Select.Option value={item.id} key={item.id}>{item.payeename}</Select.Option>);
                                        })
                                        }
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                {getFieldDecorator('accopenbank', {
                                    initialValue: recData.bankbranch ? recData.bankbranch : null
                                })(
                                    <Input maxLength="100" disabled={true}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="收款账号" hasFeedback>
                                {getFieldDecorator('accno', {
                                    initialValue: recData.payeeno ? recData.payeeno : null
                                })(
                                    <Input maxLength="100" disabled={true}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="出货备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: true, message: '请输入本单出货备注'
                                    }],
                                    initialValue: ""
                                })(
                                    <TextArea autosize={{minRows: 2, maxRows: 10}} maxLength="500"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="转账确认函" hasFeedback>
                                <SingleDragger url={dataSource.url} ref="url" dataSource={dataSource}
                                               module={this.state.module}/>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            );
        }
})




// WEBPACK FOOTER //
// ./public/src/components/order/components/AccountInfos.js